<template>
	<view>
		<view v-if="tabBarIndex == 0">
			<operation-stats-view ref="operationStatsView" :tabBarHeight="tabBarHeight"></operation-stats-view>
		</view>
		<view v-else-if="tabBarIndex == 1">
			<device-stats ref="deviceStats" :tabBarHeight="tabBarHeight"></device-stats>
		</view>
		<view v-else-if="tabBarIndex == 2">
			<day-status ref="dayStatus" :tabBarHeight="tabBarHeight"></day-status>
		</view>
		<view v-else-if="tabBarIndex == 3">
			<month-status ref="monthStatus" :tabBarHeight="tabBarHeight"></month-status>
		</view>
		<view id="tabbar">
			<tabbar-stats ref="tabbarStats"></tabbar-stats>
		</view>
	</view>
</template>

<script>
	import operationStatsView from './operation-stats-view-v2.vue'
	import dayStatus from './day-stats/day-stats.vue'
	import monthStatus from './month-stats/month-stats.vue'
	import deviceStats from './device-stats/device-stats.vue';
	export default {
		components: {
			operationStatsView,
			dayStatus,
			monthStatus,
			deviceStats
		},
		data() {
			return {
				tabBarIndex: 0,
				tabBarHeight: 0
			}
		},
		onLoad() {
			console.log("tabbarStats");
			uni.$off("tabbarStats");
			uni.$on("tabbarStats",(data) => {
				const index = data.index;
				this.tabBarIndex = index;
				console.log("this.tabBarIndex", this.tabBarIndex)
				this.$nextTick(() => {
					if(this.tabBarIndex == 0){
						let operationStatsView = this.$refs.operationStatsView;
						if(operationStatsView){
							operationStatsView.Load();
							setTimeout(() => {
								operationStatsView.Ready();
							})
						}
					}else if(this.tabBarIndex == 1){
						let deviceStats = this.$refs.deviceStats;
						if(deviceStats){
							deviceStats.Load();
							setTimeout(() => {
								deviceStats.Ready();
							})
						}
					}else if(this.tabBarIndex == 2){
						let dayStatus = this.$refs.dayStatus;
						if(dayStatus){
							dayStatus.Load();
							setTimeout(() => {
								dayStatus.Ready();
							})
						}
					}else if(this.tabBarIndex == 3){
						let monthStatus = this.$refs.monthStatus;
						if(monthStatus){
							monthStatus.Load();
							setTimeout(() => {
								monthStatus.Ready();
							})
						}
					}
					this.getPomHeight();
				})
			})

			this.$nextTick(() => {
				this.$refs.tabbarStats.Load();
			})
		},
		onReady() {
			if(this.tabBarIndex == 0){
				let operationStatsView = this.$refs.operationStatsView;
				if(operationStatsView){
					operationStatsView.Ready();
				}
			}else if(this.tabBarIndex == 1){
				let deviceStats = this.$refs.deviceStats;
				if(deviceStats){
					deviceStats.Ready();
				}
			}else if(this.tabBarIndex == 2){
				let dayStatus = this.$refs.dayStatus;
				if(dayStatus){
					dayStatus.Ready();
				}
			}else if(this.tabBarIndex == 3){
				let monthStatus = this.$refs.monthStatus;
				if(monthStatus){
					monthStatus.Ready();
				}
			}
			this.getPomHeight();
		},
		onPullDownRefresh() {
			if(this.tabBarIndex == 0){
				let operationStatsView = this.$refs.operationStatsView;
				if(operationStatsView){
					operationStatsView.PullDownRefresh();
				}
			}else if(this.tabBarIndex == 1){
				let deviceStats = this.$refs.deviceStats;
				if(deviceStats){
					deviceStats.PullDownRefresh();
				}
			}else if(this.tabBarIndex == 2){
				let dayStatus = this.$refs.dayStatus;
				if(dayStatus){
					dayStatus.PullDownRefresh();
				}
			}else if(this.tabBarIndex == 3){
				let monthStatus = this.$refs.monthStatus;
				if(monthStatus){
					monthStatus.PullDownRefresh();
				}
			}
		},
		onPageScroll(e) {
			if(this.tabBarIndex == 0){
			}else if(this.tabBarIndex == 1){
				let deviceStats = this.$refs.deviceStats;
				if(deviceStats){
					// dayStatus.PageScroll(e);
				}
			}else if(this.tabBarIndex == 2){
				let dayStatus = this.$refs.dayStatus;
				if(dayStatus){
					// dayStatus.PageScroll(e);
				}
			}else if(this.tabBarIndex == 3){
				let monthStatus = this.$refs.monthStatus;
				if(monthStatus){
					// monthStatus.PageScroll(e);
				}
			}
		},
		methods: {
			//计算高度
			getPomHeight() {
				this.$nextTick(() => {
					setTimeout(() => {
						let query = wx.createSelectorQuery().in(this)
						query.select('#tabbar').boundingClientRect()
						query.exec(res => {
							this.tabBarHeight = res[0].height
							console.log("底部导航栏高度",this.tabBarHeight)
						})
					},1000)
				})
			},
		}
	}
</script>

<style lang="scss">
</style>
